<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <swiper :options="swiperOption" :auto-update="true" ref="indexSwiper">
        <swiperSlide class="swiper-item" v-for="(item, index) in swiperData" :key="index">
          <slider-inner :data="item"></slider-inner>
        </swiperSlide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import SliderInner from './SliderInner'
export default {
  name: 'IndexSwiper',
  props: {
    swiperData: Array
  },
  components: {
    swiper,
    swiperSlide,
    SliderInner
  },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        initialSlide: 1,//默认第几张
        loop:true, //循环
        autoplayDisableOnInteraction:false,//触摸后再次自动轮播
        autoplay:2000, //每张播放时长3秒，自动播放
        speed:1000,//滑动速度
      }
    }
  }
}
</script>
<style lang="scss" scoped>
 .swiper-wrapper >>> .swiper-pagination-bullet-active {
   background-color: #fff;
 }
</style>